Day6

html視訊鏡頭研究成果

程式中的html程式是我設定的class，video名稱是inputvideo，高跟寬分別為150、200，是用來顯示攝影機即時的影像。之後我們會在JS中選取這個元素。

接著要把透過 MediaDevices.getUserMedia() 將取得的串流（Stream）播放於瀏覽器上。我們先選取HTML的video元素：
要把取得的串流放到 video 中有兩種作法，一種是透過HTMLMediaElement.srcObject的方式，一種是透過URL.createObjectURL()的方式，這兩種方法都可以把串流的內容放到 video 中進行播放，但前者並不會在 video 上出現src的屬性即可播放；後者則是利用在 video 上的src屬性來讀取影音串流。
由於較新的瀏覽器已不支援 URL.createObjectURL() 的方法，因此建議要加上判斷，看瀏覽器能否使用HTMLMediaElement.srcObject，否則的話就使用URL.createObjectURL()中：
可能會發現視訊的畫面有些卡頓，這是因為我們沒有讓這個 video 元素播放，所以只有在當瀏覽器畫面重新渲染時（例如捲動 scrollbar 時），才會更新視訊畫面，因此我們可以針對HTML Video element 監聽loadedmetadata這個事件，它會在當媒體檔的metadata完成載入時被觸發，這時候在來透過 video.play() 播放：
這樣就不會有畫面卡頓的問題了。